<template>
  <div>
    <Steps :items="stepItems" :current="stepsCurrent" />

    <div class="panel">
      <button v-for="item in stepItems" :key="item.key" @click="stepsCurrent = item.key">
        {{ item.title }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { StepsOption } from '@/components/Steps.vue'

const stepItems = ref<Array<StepsOption>>([
  {
    title: '我的购物车',
    key: 'Cart'
  },
  {
    title: '填写核对订单',
    key: 'Pay'
  },
  {
    title: '成功提交订单',
    key: 'OrderResult'
  }
])

const stepsCurrent = ref('Cart')
</script>

<style scoped lang="scss">
.panel {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
